<template>
  <div class="signin">
    <div class="welcome">Welcom back</div>
    <div class="welcome-desc">
      Registration for the March SAT has ended.
      Start preparing for test day.
      From free test prep to a checklist of what to bring on test day,
      College Board provides everything you need to prepare.
    </div>
    <NForm ref="loginFormRef"
           :model="loginFormModel"
           :show-label="false"
           :rules="loginRules">
      <NFormItem path="username"
                 :show-label="true"
                 label="">
        <NInput v-model:value="loginFormModel.username"
                placeholder="Email"
                size="large"
                autocomplete="on"
                @keydown.enter="signIn" />
      </NFormItem>
      <NFormItem path="password"
                 label="">
        <NInput v-model:value="loginFormModel.password"
                type="password"
                placeholder="Password"
                show-password-on="click"
                autocomplete="on"
                size="large"
                @keydown.enter="signIn" />
      </NFormItem>
      <div class="w-full btn-login">
        <NButton type="primary"
                 :loading="loading"
                 class="w-full!"
                 size="large"
                 style="width: 100%;border-radius:7px;"
                 @click="signIn">
          Sign In
        </NButton>
      </div>
      <div style="margin:10px 0">OR</div>
      <div class="w-full btn-login2">
        <NButton strong
                 secondary
                 :loading="loading"
                 class="w-full!"
                 size="large"
                 style="width: 100%;border-radius:7px;">
          Sign In with Google
        </NButton>
      </div>
      <div class="w-full btn-login2">
        <NButton strong
                 secondary
                 :loading="loading"
                 class="w-full!"
                 size="large"
                 style="width: 100%;border-radius:7px;">
          Sign In with Twitter
        </NButton>
      </div>
    </NForm>
  </div>
</template>

<script setup lang="ts">
import type { FormInst, FormRules } from "naive-ui";
import { NButton, NForm, NFormItem, NInput } from "naive-ui";
import { useMessage } from "naive-ui";
// import { useNotification } from "naive-ui";
import type { SignInFromType } from "./login/types";

import { computed, onBeforeMount, ref, reactive } from "vue";
// import { useUserStore } from "@/store/user";
const message = useMessage();
// const notification = useNotification();

const loginFormModel: SignInFromType = reactive<SignInFromType>({
  username: "",
  password: "",
});
const loginRules: FormRules = reactive({
  username: [
    {
      required: true,
      message: "Username cannot be empty",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "Password cannot be empty",
      trigger: "blur",
    },
  ],
});
const loading = ref<boolean>(false);
const loginFormRef = ref<HTMLElement & FormInst>();
function signIn(e: Event) {
  if (
    loginFormModel.username == "admin" &&
    loginFormModel.password == "123456"
  ) {
    message.success("Login successful");
  } else {
    message.warning("Username error");
  }

  console.log("success");
}
</script>
<style lang="less" scoped>
.welcome {
  text-align: left;
  font-size: 35px;
  font-weight: 700;
}
.welcome-desc {
  text-align: left;
  font-size: 20px;
}
.btn-login {
  margin-top: 50px;
}
.btn-login2 {
  margin-top: 10px;
}
</style>